import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Tabs, Row, Col, Checkbox } from 'antd';
import { UserOutlined, LockOutlined,MobileOutlined } from '@ant-design/icons';
import qs from 'qs'
import request from '../../utils/request'
import './index.css'
const { TabPane } = Tabs;

export default function HorizontalLoginForm() {
    const [loginForm] = Form.useForm();
    const [form] = Form.useForm();
    const [, forceUpdate] = useState(); // To disable submit button at the beginning.
    useEffect(() => {
        forceUpdate({});
    }, []);

    const onLogin = async (data) => {
        // await request({
        //     method: 'POST',
        //     url: '/front/user/login',
        //     headers: { 'content-type': 'application/x-www-form-urlencoded' },
        //     data: qs.stringify({
        //         phone: '18201288771',
        //         password: '111111'
        //       }) // axios 默认发送的是 application/json 格式的数据
        //   })
        await request({
            url:'/users/login',
            method:'post',
            data:{
                user:data
            }
        })
    };

    const onFinish = async (data) => {
        console.log('Finish:', data);
        await request({
            url:'/users',
            method:'post',
            data:{
                user:data
            }
        })
    };

    function callback(key) {
        console.log(key);
    }

    return (
        <div>
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="登录" key="1">
                    <Form form={loginForm} name="horizontal_login" layout="inline" onFinish={onLogin}>
                        <Form.Item
                            name="email"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Row className="ant-form-item text" >
                            <Col span={12}>
                                <Checkbox >记住我</Checkbox>
                            </Col>
                            <Col span={12}>登录遇到问题？</Col>
                        </Row>

                        <Form.Item shouldUpdate={true}>
                            {() => (
                                <Button
                                    size="large"
                                    shape="round"
                                    type="primary"
                                    htmlType="submit"
                                    disabled={
                                        !loginForm.isFieldsTouched(true) ||
                                        loginForm.getFieldsError().filter(({ errors }) => errors.length).length
                                    }
                                >
                                    登录
                                </Button>
                            )}
                        </Form.Item>
                    </Form>
                </TabPane>
                <TabPane tab="." disabled key="-">
                </TabPane>
                <TabPane tab="注册" key="2">
                    <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="email"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your email!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<MobileOutlined className="site-form-item-icon" />}
                                type="email"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                       

                        <Form.Item shouldUpdate={true}>
                            {() => (
                                <Button
                                    size="large"
                                    shape="round"
                                    type="primary"
                                    htmlType="submit"
                                    disabled={
                                        !form.isFieldsTouched(true) ||
                                        form.getFieldsError().filter(({ errors }) => errors.length).length
                                    }
                                >
                                    注册
                                </Button>
                            )}
                        </Form.Item>
                    </Form>
                </TabPane>
            </Tabs>

        </div>
    );
};
